import React, { useState } from 'react';
import { Input, Form } from 'antd';

import style from './index.less';

interface PWdInputState {
  placeholder?: any;
  size?: 'small' | 'large' | 'middle';
  name?: string;
}

const PwdInput = (props: PWdInputState) => {
  const { placeholder, size, name } = props;
  // 密码显示隐藏
  const [showPwd, setShowPwd] = useState<boolean>(false);
  const suffix = (
    <span
      className={style.suffix}
      onClick={() => {
        setShowPwd(!showPwd);
      }}
      aria-hidden="true"
    >
      {showPwd ? '隐藏' : '显示'}
    </span>
  );

  return (
    <Form.Item
      label="密码"
      name={name}
      rules={[{ required: true, message: '请输入密码！' }]}
    >
      <Input
        type={showPwd ? 'text' : 'password'}
        size={size}
        suffix={suffix}
        placeholder={placeholder}
      />
    </Form.Item>
  );
};

PwdInput.defaultProps = {
  placeholder: '请输入密码',
  size: 'middle',
  name: 'password',
};

export default PwdInput;
